<!doctype html>
<#import "/spring.ftl" as spring />
<html lang="en">
<head>
<#include "../include/css.ftl">
    <link href="${ctx}/static/css/img-cropping.css" rel="stylesheet" type="text/css"/>
    <link href="${ctx}/static/plugins/cropper/cropper.min.css" rel="stylesheet" type="text/css"/>
</head>

<body class="adminbody">

<div class="content-page">
    <!-- Start content -->
    <div class="content">
        <div class="container-fluid">
            <div class="row">

                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12 col-xl-12">
                    <div class="card mb-3">
                        <div class="card-header">
                            <h3><i class="fa fa-user"></i> Profile details</h3>
                        </div>

                        <div class="card-body">
                            <form action="${ctx}/profile?_csrf=${_csrf.token}" method="post" >
                                <div class="row">

                                        <div class="col-lg-6 col-xl-6">
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>登录系统的账号：</label>
                                                        <input type="hidden" id="uid" name="uid" value="${(account.uid)!''}">
                                                        <input class="form-control" name="username" type="text" value="${(account.username)!''}" disabled/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>真实姓名：</label>
                                                        <input class="form-control" name="realName" type="text" value="${(account.real_name)!''}"/>
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <div class="form-group">
                                                        <label>密码 (不修改密码时不需要填写)</label>
                                                        <input class="form-control" name="password" type="password" value=""/>
                                                    </div>
                                                </div>

                                            </div>
                                            <div class="row">
                                                <div class="col-lg-6">
                                                    <button type="submit" class="btn btn-primary"> 保 存</button>
                                                </div>
                                            </div>
                                        </div>


                                    <div class="col-lg-6 col-xl-6 border-left">
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <b>Latest activity</b>: Dec 06 2017, 22:23
                                            </div>
                                            <div class="col-lg-12">
                                                <b>Register date: </b>: Nov 24 2017, 20:32
                                            </div>
                                            <div class="col-lg-12">
                                                <b>Register IP: </b>: 123.456.789
                                            </div>
                                        </div>
                                        <br/>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <div id="avatar_image">
                                                    <img id="avatar" alt="avatar image" style="max-width:100px; height:auto;border-radius: 50%" src="${account.avatar_url}"/>
                                                </div>
                                            </div>
                                        </div>
                                        <br/>
                                        <div class="row">
                                            <div class="col-lg-12">
                                                <button type="button" id="replaceImg" class="btn l-btn">更换头像</button>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                        <!-- end card-body -->
                    </div>
                <!-- end col -->
            </div>
            <!-- end row -->
        </div>
        <!-- END container-fluid -->
    </div>
    <!-- END content -->
</div>

<!--图片裁剪框 start-->
<div style="display: none" class="tailoring-container">
    <div class="black-cloth" onclick="closeTailor(this)"></div>
    <div class="tailoring-content">
        <div class="tailoring-content-one">
            <label title="上传图片" for="chooseImg" class="l-btn choose-btn">
                <input type="file" accept="image/jpg,image/jpeg,image/png" name="file" id="chooseImg" class="hidden" onchange="selectImg(this)">
                选择图片
            </label>
            <div class="close-tailoring" onclick="closeTailor(this)">×</div>
        </div>
        <div class="tailoring-content-two">
            <div class="tailoring-box-parcel">
                <img id="tailoringImg">
            </div>
            <div class="preview-box-parcel">
                <p>图片预览：</p>
                <div class="square previewImg"></div>
                <div class="circular previewImg"></div>
            </div>
        </div>
        <div class="tailoring-content-three">
            <button class="l-btn cropper-reset-btn">复位</button>
            <button class="l-btn cropper-rotate-btn">旋转</button>
            <button class="l-btn cropper-scaleX-btn">换向</button>
            <button class="l-btn sureCut" id="sureCut">确定</button>
        </div>
    </div>
</div>
<!--图片裁剪框 end-->
<!-- END content-page -->

<!-- END main -->
<#include "../include/js.ftl">
<script src="${ctx}/static/plugins/cropper/cropper.min.js"></script>
<script>
    $(document).ready(function () {
        //弹出框水平垂直居中
        (window.onresize = function () {
            var win_height = $(window).height();
            var win_width = $(window).width();
            if (win_width <= 768) {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    "left": 0
                });
            } else {
                $(".tailoring-content").css({
                    "top": (win_height - $(".tailoring-content").outerHeight()) / 2,
                    "left": (win_width - $(".tailoring-content").outerWidth()) / 2
                });
            }
        })();

        //弹出图片裁剪框
        $("#replaceImg").on("click", function () {
            $(".tailoring-container").toggle();
        });

        //cropper图片裁剪
        $('#tailoringImg').cropper({
            aspectRatio: 1 / 1,//默认比例
            preview: '.previewImg',//预览视图
            guides: false,  //裁剪框的虚线(九宫格)
            autoCropArea: 0.5,  //0-1之间的数值，定义自动剪裁区域的大小，默认0.8
            movable: false, //是否允许移动图片
            dragCrop: true,  //是否允许移除当前的剪裁框，并通过拖动来新建一个剪裁框区域
            movable: true,  //是否允许移动剪裁框
            resizable: true,  //是否允许改变裁剪框的大小
            zoomable: false,  //是否允许缩放图片大小
            mouseWheelZoom: false,  //是否允许通过鼠标滚轮来缩放图片
            touchDragZoom: true,  //是否允许通过触摸移动来缩放图片
            rotatable: true,  //是否允许旋转图片
            crop: function (e) {
                // 输出结果数据裁剪图像。
            }
        });
        //旋转
        $(".cropper-rotate-btn").on("click", function () {
            $('#tailoringImg').cropper("rotate", 45);
        });
        //复位
        $(".cropper-reset-btn").on("click", function () {
            $('#tailoringImg').cropper("reset");
        });
        //换向
        var flagX = true;
        $(".cropper-scaleX-btn").on("click", function () {
            if (flagX) {
                $('#tailoringImg').cropper("scaleX", -1);
                flagX = false;
            } else {
                $('#tailoringImg').cropper("scaleX", 1);
                flagX = true;
            }
            flagX != flagX;
        });

        // 确认 裁剪后的处理
        $("#sureCut").on("click", function () {
            if ($("#tailoringImg").attr("src") == null) {
                return false;
            } else {
                var image_canvas = $('#tailoringImg').cropper('getCroppedCanvas');//获取被裁剪后的canvas
                var base64url = image_canvas.toDataURL('image/png'); //转换为base64地址形式
                // ajax 上传图片
                uploadAvatar(base64url);
            }
        });


    });

    //关闭裁剪框
    function closeTailor() {
        $(".tailoring-container").toggle();
    }

    //用户选择图片
    function selectImg(file) {
        if (!file.files || !file.files[0]) {
            return;
        }
        var reader = new FileReader();
        reader.onload = function (evt) {
            var replaceSrc = evt.target.result;
            //更换cropper的图片
            $('#tailoringImg').cropper('replace', replaceSrc, false);//默认false，适应高度，不失真
        }
        reader.readAsDataURL(file.files[0]);
    }

    function uploadAvatar(imagedata) {
        var uid =$("#uid").val();
        var data={avatar:imagedata};
//        var formData = new FormData();
//        formData.append("file",imagedata, uid+".png").contentType();
//        console.log(formData);
        var _csrf_token = $("meta[name='_csrf']").attr("content");
        var _csrf_header_name = $("meta[name='_csrf_header']").attr("content");
        $.ajax({
            type: "POST",
            beforeSend: function (request) {
                request.setRequestHeader(_csrf_header_name, _csrf_token);
            },
            url: "${ctx}/profile/avatar/save/",
            data: data,
            dataType: 'JSON',
            success: function (data, status) {
                if(data.status == 200){
                    window.parent.showSuccessMsg("头像更换成功");
                    $("#avatar", parent.document).attr("src",data.data);
                    window.location.reload();
                }else{
                    toastr.error('保存失败')
                }
            },
            error: function (jqXHR, textStatus, errorThrown) {
                if(jqXHR.status == 440 ||jqXHR.status == 403){
                    window.location.assign("${ctx}/");
                }else if (jqXHR.status >= 500) {
                    toastr.error('暂停服务，请耐心等待服务恢复。', '系统通知')
                } else {
                    toastr.error('error code: ' + jqXHR.status, 'Error')
                }
            }
        });
    }
</script>
<!-- END Java Script for this page -->

</body>
</html>